import React          from 'react';
import ReactDOM       from 'react-dom';
import { BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom';

// css
import 'font-awesome/css/font-awesome.min.css';
import './css/index.css';

// 组件
import Home           from './components/home'
import Layout         from './common/layout'
import Login          from './components/login'
import ErrorPage      from './components/error'
import UserList       from './components/user'
import Order          from './components/order'
import OrderDetail    from './components/order/detail'
// router
import ProductRouter  from './components/product/router.js';

class App extends React.Component {
  render () {
    let LayoutRouter = (
      <Layout>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/product" component={ProductRouter}/>
          <Route path="/product-category" component={ProductRouter}/>
          <Route path="/order/index" component={Order}/>
          <Route path="/order/detail/:orderNumber" component={OrderDetail}/>
          <Route path="/user/index" component={UserList}/>
          <Redirect exact from="/order" to="/order/index"/>
          <Redirect exact from="/user" to="/user/index"/>
          <Route component={ErrorPage}/>
        </Switch>
      </Layout>
    )
    return (
      <Router>
        <Switch>
          <Route path="/login" component={Login}/>
          <Route path="/" render={ props => LayoutRouter } />
        </Switch>
      </Router>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)
